<template>
	<view class="content">
		<swiper class="swiper" autoplay indicator-dots @change="handleSwiperChange">
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="nav"> 
			<view class="nav_item"  v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view class="iconfont" v-bind:class="item.icon"></view>
				<text class="text">{{item.title}}</text>
			</view>
		</view>
		<!---推荐商品区-->
		<view class="hot_goods">
			<view class="title"><view class="iconfont icon-gouwuchetianjia prod_icon"></view>推荐商品</view>
			<view class="hot_wrapper">
				<goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goods_list/goods_list.vue'
	export default {
		data() {
			return {
				navs:[
					{
						icon:"icon-gouwuchetianjia",
						title:"超市",
						path:"/pages/goods/goods"
					},
					{
						icon:"icon-wodefankui",
						title:"联系我们",
						path:"/pages/contact/contact"
					},
					{
						icon:"icon-ju",
						title:"社区图片",
						path:"/pages/pics/pics"
					},
					{
						icon:"icon-jushoucanggift",
						title:"学习视频",
						path:"/pages/videos/videos"
					}
				],
				swipers:[
					{
						id:1,
						url:"https://dimg04.c-ctrip.com/images/0zg4g12000cjr6sob5143.jpg"
					},
					{
						id:2,
						url:"https://dimg04.c-ctrip.com/images/0zg0q12000aqf703079A9.jpg"
					},
					{
						id:3,
						url:"https://dimg04.c-ctrip.com/images/0zg6712000ada79f3086D.png"
					}
				],
				shopList:[
					{
						id:1,
						img_url:"https://img3m6.ddimg.cn/93/28/1746081606-1_h_8.jpg",
						title:"黔藏老酒 茅台镇 53度酱香型白酒 500ml",
						sell_price:"128"
					},
					{
						id:2,
						img_url:"https://img3m0.ddimg.cn/94/4/1851297520-1_h_5.jpg",
						title:"53度茅台镇酱香型白酒 黔藏老酒（喜宴）500ml*2双支装",
						sell_price:"529"
					},
					{
						id:3,
						img_url:"https://img3m8.ddimg.cn/33/2/11404499568-1_h_1.jpg",
						title:"贵州53度国台·品绛酱香型高端白酒礼盒送礼500ml*6瓶整箱",
						sell_price:"5994"
					},
					{
						id:4,
						img_url:"https://img3m4.ddimg.cn/21/33/1422284214-1_h_3.jpg",
						title:"五粮液股份公司 52度春夏秋冬马到成功2.5L单坛装",
						sell_price:"12800"
					}
				],
				goods:[]
			}
		},
		components:{
			goodsList
		},
		onLoad() {
			this.getSwiper();
			this.getHotGoods();
		},
		methods: {
			//获取轮播图的数据
		    async getSwiper(){
				// uni.request({
				// 	url:"http://localhost:8082/api/getlunbo",
				// 	success:function(res){
				// 		if(res.data.status!==0){
				// 			return uni.showToast({
				// 				title:"获取数据失败!"
				// 			})
				// 		}
				// 		this.swipers = res.data.message;
				// 	}
				// })
				// const res = await this.$myRequest({
				// 	url:"/api/getlunbo"
				// })
				// this.swipers = res.data.message;
				// console.log(res);
			},
			handleSwiperChange(event){
				console.log(event.detail.current);
			},
			navItemClick(item){
				uni.navigateTo({
					url:item
				})
			},
			async getHotGoods(){
				const res = await this.$myRequest({
					url:"/api/getgoods?pageindex=1"
				})
				this.goods = res.data.message;
				console.log(this.goods)
			},
			//跳转到商品详情页
			goGoodsDetail(id){
				uni.navigateTo({
					url:"/pages/goods_detail/goods_detail?id="+id
				})
			}
		}
	}
</script>

<style>
	.content .swiper{
		width:750rpx;
		height:320rpx;
	}
	.content .swiper .swiper-item{
		width:100%;
		height:320rpx;
	}
	.content  image{
		width:100%;
		height:100%;
	}
	.nav{
		display:flex;
		flex-direction: row;
	}
	.nav .nav_item{
		width:25%;
		text-align:center;
	}
	.nav .nav_item view{
		width:100rpx;
		height:100rpx;
		line-height:100rpx;
		background:#b50e03;
		border-radius:60rpx;
		margin:25rpx auto 25rpx;
		font-size:52rpx;
		color:#fff;
	}
	.nav_item .text{
		font-size:24rpx;
		color:#333;
	}
	
	.hot_goods{
		overflow:hidden;
	}
	.hot_goods .title{
		display:flex;
		justify-content:center;
		align-items:center;
		height:50rpx;
		line-height:50rpx;
		font-size:36rpx;
		color:#b50e03;
		text-align:center;
		letter-space:44rpx;
		background:#fff;
		margin:20rpx auto;
		border-top:1rpx solid #ededed;
		padding:30rpx 0;
	}
	.hot_goods .title .prod_icon{
		font-size:45rpx;
		margin:0 10rpx;
	}
	.hot_wrapper{
		display:flex;
	}
	.goods_list{
		padding:0 15rpx;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.goods_item{
		background:#fff;
		width:350rpx;
		margin:5rpx auto;
	}
	.goods_item .name{
		width:90%;
		font-size:28rpx;
		color:#333;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow:hidden;
	}
	.goods_item img{
		width:350rpx;
		height:355rpx;
	}
	
</style>
